<!--
 * @Author: jingjingzheng 1742420988@qq.com
 * @Date: 2023-12-05 14:18:07
 * @LastEditors: jingjingzheng 1742420988@qq.com
 * @LastEditTime: 2024-03-29 23:05:34
 * @FilePath: \mdbj-ui\src\views\datamanager\road\editPanel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="title-row">
        <span :style="{ color: theme }">| 修改{{roadname}}信息</span>
      </el-col>
    </el-row>

    <el-form id="elForm" ref="elForm" :model="formData" :rules="rules" size="medium" label-width="125px" v-if="formData">
      <el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 详情面板1 -->
          <el-tab-pane label="基本信息" name="roadPanel">
            <el-col :span="formcolwidth">
              <el-form-item label="道路编码">
                <el-input v-model="formData.code" :disabled="true" clearable :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item label="道路名称" prop="name">
                <el-input v-model="formData.name" :disabled="iseditroad" clearable :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item label="保洁公司" prop="cleancompany">
                <el-select v-model="formData.cleancompany"  :disabled="isroaddie" placeholder="请选择保洁公司" clearable :style="{ width: '100%' }">
                  <el-option v-for="dict in dict.type.sys_cleancompany" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item label="道路等级" prop="roadclass_js">
                <el-select v-model="formData.roadclass_js" :disabled="iseditroad" placeholder="请选择道路等级" clearable
                  :style="{ width: '100%' }">
                  <el-option v-for="dict in dict.type.sys_roadclass_js" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item label="参考长度(m)" prop="ref_length">
                <el-input
                v-model="formData.ref_length" :disabled="iseditroad" clearable :style="{ width: '100%' }"
                @input="formData.ref_length= formData.ref_length.replace(/[^\d|\.]/g, '')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <div v-if="formData.length">
                <el-form-item label="道路长度(m)" prop="length.toFixed(2)">
                  <el-input v-model="formData.length.toFixed(2)" :disabled="true" clearable :style="{ width: '100%' }"></el-input>
                </el-form-item>
              </div>
              <div v-if="!formData.length">
                <el-form-item label="道路长度(m)" prop="length">
                  <el-input v-model="formData.length" :disabled="true" clearable :style="{ width: '100%' }"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item label="机动车道宽度(m)" prop="width">
                <el-input v-model="formData.width" :disabled="iseditroad" clearable :style="{ width: '100%' }"
                @input="formData.width= formData.width.replace(/[^\d|\.]/g, '')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item label="机动车道数量" prop="lanenumber">
                <el-input v-model="formData.lanenumber" :disabled="iseditroad" clearable :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item label="非机动车道数量" prop="feijdcds">
                <el-input v-model="formData.feijdcds" :disabled="iseditroad" clearable :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item label="是否有人行道" prop="sfsidewalk">
                <el-select v-model="formData.sfsidewalk" placeholder="请选择是否有人行道" :disabled="iseditroad" clearable :style="{ width: '100%' }">
                  <el-option v-for="dict in dict.type.sys_sfsidewalk" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <el-tooltip class="item" effect="dark" content="根据道路走向由西向东，由南向北，偏西或偏南为起点" placement="top">
                <el-form-item label="起点" prop="startpoint">
                  <el-input v-model="formData.startpoint" :disabled="iseditroad" clearable :style="{ width: '100%' }"></el-input>
                </el-form-item>
              </el-tooltip>
            </el-col>
            <el-col :span="formcolwidth">
              <el-tooltip class="item" effect="dark" content="根据道路走向由西向东，由南向北，偏东或偏北为止点" placement="top">
                <el-form-item label="止点" prop="endpoint">
                  <el-input v-model="formData.endpoint" :disabled="iseditroad" clearable
                  :style="{ width: '100%' }"></el-input>
                </el-form-item>
              </el-tooltip>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item label="路面材料" prop="pavementmaterials">
                <el-select v-model="formData.pavementmaterials" placeholder="请选择路面材料" :disabled="iseditroad" clearable :style="{ width: '100%' }">
                  <el-option v-for="dict in dict.type.sys_pavementmaterials" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item  label="管理单位" prop="managementunit">
                <el-input v-model="formData.managementunit" :disabled="iseditroad" clearable :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <!-- 道路状态更改 -->
            <el-col :span="formcolwidth" v-if="iseditroad">
              <el-form-item label="状态" prop="data_status">
                <el-select v-model="formData.data_status" :disabled="!iseditroad" placeholder="请选择道路状态" clearable
                  :style="{ width: '100%' }">
                  <el-option v-for="dict in dict.type.select_road_data_status" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 新增道路状态 不可选 -->
            <el-col :span="formcolwidth" v-if="!iseditroad">
              <el-form-item label="状态" prop="data_status">
                <el-select v-model="formData.data_status" :disabled="!iseditroad" placeholder="请选择道路状态" clearable
                  :style="{ width: '100%' }">
                  <el-option v-for="dict in dict.type.road_data_status" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="formcolwidth">
              <el-form-item label="备注" prop="note">
                <el-input v-model="formData.note" :disabled="false" clearable :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
          </el-tab-pane>
          <!-- 修改面板2 -->
          <!-- roadsurfaceDataPanel 依赖roadCode属性，所以需要等roadCode有值后再渲染-->
          <el-tab-pane label="道路面信息" name="roadsurfacePanel">
            <roadsurfaceDataPanel
            ref="roadsurfaceDataPanel"
            :mapview="mapview"
            :roadcode="roadcode"
            :roadname="roadname"
            :roadcleancompany="roadcleancompany"
            :feature="feature"
            :featureLayer="featureLayer"
            :localname="localname"
            :activeName="activeName"
            :isroaddie="isroaddie"
            v-if="roadcode" />
          </el-tab-pane>

        </el-tabs>
      </el-row>

      <div class="footer" >
        <el-button v-if="activeName == 'roadPanel'" type="primary" @click="submitForm" icon="el-icon-check">提交</el-button>
        <!-- <el-button  v-if="activeName == 'roadPanel' && formData.data_status =='1'" @click="resetForm">重置</el-button> -->
          <el-button type="primary" plain icon="el-icon-circle-close" @click="cancel">返回</el-button>
      </div>

    </el-form>
  </div>

</template>

<script>
  import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
  import Graphic from "@arcgis/core/Graphic";
  import Sketch from "@arcgis/core/widgets/Sketch";
  import roadsurfaceDataPanel from "./../roadsurface/dataPanel";
  export default {
    props: {
      mapview: { default: () => { } },
      paramObj: { default: () => { } },
    },
    inject: ["toggleComponent"],
    dicts: [
      "sys_roadclass_js",
      "sys_cleancompany",
      "sys_sfsidewalk",
      "sys_pavementmaterials",
      "road_data_status",
      "select_road_data_status",
    ],
    components: {
      GraphicsLayer,
      Graphic,
      Sketch,
      roadsurfaceDataPanel:roadsurfaceDataPanel,
    },
    computed: {
      theme() {
        return this.$store.state.settings.theme;
      },
    },
    data() {
      return {
        // 初始面板
        activeName: "roadPanel",
        // 定义当前组件名称
        localname:"editPanel",
        //新增道路单线是否可修改开关
        iseditroad: true,
        // 是否为灭失道路
        isroaddie:false,
        roadcode: undefined,
        roadname: undefined,
        roadcleancompany: undefined,
        // 修改表单参数
        formData: undefined,
        rules: {},
        rule1: {
          name: [
            { required: true, message: '请输入道路名称', trigger: 'blur' },
          ],
          roadclass_js: [
            { required: true, message: '请选择道路等级', trigger: 'blur' },
          ],
          cleancompany: [
            { required: true, message: '请选择保洁单位', trigger: 'change' }
          ],
          lanenumber:[
            {required: true, "pattern": /^[0-9]*$/,"message": "只能输入正整数"}
          ],
          feijdcds:[
            {required: true, "pattern": /^[0-9]*$/,"message": "只能输入正整数"}
          ],
          sfsidewalk: [
            { required: true, message: '请选择是或否', trigger: 'change' }
          ],
          startpoint: [
            { required: true, message: '请输入道路起点名称', trigger: 'blur' },
          ],
          endpoint: [
            { required: true, message: '请选择道路止点名称', trigger: 'blur' },
          ],
          data_status: [
            { required: false, message: '请选择道路状态', trigger: 'blur' },
          ],
          managementunit: [
            { required: false, message: '请输入道路管理单位全称', trigger: 'blur' },
          ],
        },
        rule2: {
          cleancompany: [
            { required: true, message: '请选择保洁单位', trigger: 'change' }
          ],
          data_status: [
            { required: false, message: '请选择道路状态', trigger: 'blur' },
          ],
        },
        // 当前页正在编辑的要素
        feature: undefined,
        featureLayer: undefined,
        // 列表宽度
        formcolwidth: 12,
        // 图层视图
        layerView: undefined,
        highlight: undefined,
        // 修改道路线的空间信息
        udpateGraphicsLayer: undefined,
        selectedGraphic: undefined,
        addGraphics: [],
      }
    },
    activated() {
      let _self = this;
      console.log("edit activated");
      _self.initData();
    },
    deactivated() {
      let _self = this
      _self.activeName="roadPanel";
      _self.clearGraphics();
    },
    methods: {
      /**
      * @description: 初始化数据
      * @return {*}
      */
      initData() {
        let _self = this;
        // if(!_self.udpateGraphicsLayer){
          _self.clearGraphics();
          _self.udpateGraphicsLayer = undefined;
        // };
        _self.feature = _self.feature ? _self.feature:_self.paramObj.feature;
        _self.formData = _self.feature.attributes;
        _self.roadcode = _self.formData.code;
        _self.roadname = _self.formData.name;
        _self.roadcleancompany= _self.formData.cleancompany;
        // 判断道路中心线是否灭失
        _self.isroaddie = (_self.feature.attributes.data_status == 3) ? true:false;
        _self.featureLayer = _self.featureLayer ? _self.featureLayer:_self.paramObj.featureLayer;
        _self.highlight = _self.paramObj.highlight;
        if(_self.paramObj.activeName == 'roadsurfacePanel'){
          _self.activeName = _self.paramObj.activeName;
          _self.clearGraphics();
        };
        // 判断道路单线数据是否为新增1，若为1则为新增，可启用编辑道路单线组件
        if(_self.formData.data_status == 1){
          _self.rules=_self.rule1
          _self.iseditroad = false;
          _self.updateGeometry();
        }
        else{
          _self.rules=_self.rule2
          _self.iseditroad = true;
        };
      },
      /**
      * @description: tabs切换事件
      * @param {*} value
      * @return {*}
      */
      handleClick(value) {
        let _self = this;
        console.log(value);
        _self.clearGraphics();
        if (value.name !== "roadPanel") {
          _self.clearGraphics();
          _self.activeName = "roadsurfacePanel";
        } else {
          _self.clearGraphics();
          _self.initData();
          _self.activeName = "roadPanel";
        }
      },
      clearGraphics(){
        let _self = this
        _self.addGraphics = [];
        // 删除临时图形
        _self.mapview.graphics.removeAll();
        _self.mapview.ui.remove(_self.sketch);
        _self.mapview.map.layers.remove(_self.udpateGraphicsLayer);
      },
      cancel() {
        let _self = this
        _self.feature = undefined;
        _self.formData = undefined;
        _self.featureLayer = undefined;
        _self.iseditroad = true;
        _self.roadcode= undefined;
        _self.roadname = undefined;
        _self.activeName="roadPanel";
        _self.clearGraphics();
        this.toggleComponent("dataPanel")
      },

      submitForm() {
        let _self = this;
        _self.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          if (_self.formData.data_status == 1){
            if (_self.selectedGraphic == undefined) {
              _self.$message.error("请添加空间位置信息");
              return;
            }
          };
          // 新增要素
          const editFeature = new Graphic({
            geometry:
              _self.selectedGraphic == undefined
                ? ""
                : _self.selectedGraphic.geometry,
            attributes: _self.formData,
          });
          const edits = {
            updateFeatures: [editFeature],
          };
          // 更新要素
          _self.featureLayer.applyEdits(edits).then((editsResult) => {
            // _self.initData();
            if(_self.formData.data_status == 1){
              _self.clearGraphics();
            };

            _self.$message.success("修改成功");
          });
        })
      },
      // 更新空间位置
      updateGeometry() {
        let _self = this;
        _self.udpateGraphicsLayer = new GraphicsLayer({
          title: "道路中心线编辑图层",
        });
        _self.mapview.map.add(_self.udpateGraphicsLayer);
        _self.sketch = new Sketch({
          layer: _self.udpateGraphicsLayer,
          view: _self.mapview,
          // graphic will be selected as soon as it is created
          creationMode: "update",
        });
        // 设置绘图工具条显示要素
        _self.sketch.visibleElements = {
          createTools: {
            point: false,
            polyline: true,
            polygon: false,
            rectangle: false,
            circle: false,
          },
          selectionTools: {
            "lasso-selection": false,
            "rectangle-selection": false,
          },
          settingsMenu: false,
        };
        // 指定要更新的图形
        _self.selectedGraphic = new Graphic({
          geometry: _self.feature.geometry,
          // 指定线要素符号
          symbol: window.mapConfig.symbols.polylineLocate,
        });
        _self.udpateGraphicsLayer.add(_self.selectedGraphic);
        _self.sketch.update(_self.selectedGraphic);
        _self.mapview.ui.add(_self.sketch, "top-right");
        _self.sketch.when(() => {
          // 初始时先隐藏创建图形按钮
          // 每个要素只有一个面，如果已创建的一个面，则不允许继续创建面。隐藏创建面按钮
          document.getElementsByClassName(
            "esri-sketch__section esri-sketch__tool-section"
          )[1].style.display = "none";
        });

        _self.sketch.on("create", (event) => {
          if (event.state === "complete") {
            console.log("create complete");
            _self.selectedGraphic = event.graphic;
            _self.addGraphics.push(event.graphic);
            // 每个要素只有一个面，如果已创建的一个面，则不允许继续创建面。隐藏创建面按钮
            if (_self.addGraphics.length > 0)
              document.getElementsByClassName(
                "esri-sketch__section esri-sketch__tool-section"
              )[1].style.display = "none";
          }
        });

        _self.sketch.on("update", (event) => {
          if (event.state === "complete") {
            console.log("Sketch complete");
            _self.mapview.graphics.add(event.graphics);
            // _self.mapview.ui.remove(_self.sketch);
          }
        });
        _self.sketch.on("delete", (event) => {
          event.graphics.forEach((graphic) => {
          console.log("deleted", graphic);
          if (graphic == _self.selectedGraphic)
            _self.selectedGraphic = undefined;
            _self.addGraphics = _self.addGraphics.filter(
            (item) => item !== graphic
          );
        });

        // 如果没有添加任何面，就显示创建面按钮
        if (_self.addGraphics.length == 0)
          document.getElementsByClassName(
            "esri-sketch__section esri-sketch__tool-section"
          )[1].style.display = "";
        });
      },
      resetForm() {
      let _self = this;
      _self.formData = undefined;
      _self.formData.data_status = 1;
    },
    }
  };
</script>

<style>
.item {
  margin: 4px;
}
</style>
